<template>
  <div class="stockReport">
    <div style="display: flex">
      <jc-button
        :btn-arr="['reload', 'option', 'save']"
        :disab-arr="['close', 'cancel', 'using', 'com1', 'com2', 'freeze']"
        @refresh="handleGetUntreated"
        @save="save"
        @toExcel="handleExport"
      />
      <el-button style="margin-left: 10px" size="mini" type="success" @click="summen">自动运算</el-button>
    </div>
    <el-form :model="proVal" label-width="100px" size="mini">
      <el-form-item :label="$t('market.odd')">
        <el-input v-model="proVal.fnumber" disabled />
      </el-form-item>
      <el-form-item :label="$t('market.theName')">
        <el-input v-model="proVal.fname" />
      </el-form-item>
      <el-form-item :label="$t('shop.specifica')">
        <el-input v-model="proVal.fspecification" />
      </el-form-item>
      <el-form-item :label="$t('market.model1')">
        <el-input v-model="proVal.fmodel" />
      </el-form-item>
      <el-form-item :label="$t('market.creator')">
        <el-input v-model="proVal.fcreator" disabled />
      </el-form-item>
      <el-form-item :label="$t('market.createDate')">
        <el-input v-model="proVal.fcreatedate" disabled />
      </el-form-item>
    </el-form>
    <div class="header">
      <el-button size="mini" @click="newly(1)">{{ $t('btn.newHang') }}<!--新增行--></el-button>
      <el-button size="mini" @click="newly(2)">{{ $t('btn.delHang') }}<!--删除行--></el-button>
    </div>
    <div class="table-content">
      <jc-table
        v-loading="loading"
        :table-data="tableData"
        :table-header="tableHeader"
        :table-height="tableHeight"
        sortable
      >
        <!-- 物料编码 -->
        <template v-slot:btnState="col">
          <el-input
            v-model="col.scope.row.itemcode"
            size="mini"
            :disabled="col.scope.row.isFnum"
            @input="getAtuo(col.scope.$index, col.scope.row.itemcode)"
          >
            <i
              slot="suffix"
              class="el-input__icon el-icon-search"
              @click="handleMateriel(col.scope.$index)"
            />
          </el-input>
          <div v-if="aotuTab && indexSelf === col.scope.$index" :class="indexSelf<7 ? 'tabPosit': 'tabPosit1'">
            <number-code :fnumber="fnumber" @material="materialData" />
          </div>
        </template>
        <!-- 物料名称 -->
        <template v-slot:btnStates="col">
          <el-input
            v-model="col.scope.row.itemname"
            size="mini"
            :disabled="col.scope.row.isDisabled"
            @change="handelName(col.scope.$index)"
          />
        </template>
        <!-- 物料描述 -->
        <template v-slot:tagSlot="col">
          <el-input v-model="col.scope.row.description" size="mini" :disabled="col.scope.row.isDisabled" />
        </template>
        <!-- 物料规格 -->
        <template v-slot:billSlot="col">
          <el-input v-model="col.scope.row.specification" size="mini" :disabled="col.scope.row.isDisabled" />
        </template>
        <!-- 直径 -->
        <template v-slot:orderSlot="col">
          <el-input-number v-model="col.scope.row.diameter" size="mini" />
        </template>
        <!-- 厚度 -->
        <template v-slot:operaSlot="col">
          <el-input-number v-model="col.scope.row.thickness" size="mini" />
        </template>
        <!-- 长 -->
        <template v-slot:text1Slot="col">
          <el-input-number v-model="col.scope.row.longs" size="mini" />
        </template>
        <!-- 宽 -->
        <template v-slot:text2Slot="col">
          <el-input-number v-model="col.scope.row.wide" size="mini" />
        </template>
        <!-- 高 -->
        <template v-slot:text3Slot="col">
          <el-input-number v-model="col.scope.row.high" size="mini" />
        </template>
        <!-- 用量 -->
        <template v-slot:text4Slot="col">
          <el-input-number v-model="col.scope.row.qty" size="mini" />
        </template>
        <!-- 工艺 -->
        <template v-slot:text5Slot="col">
          <el-select v-model="col.scope.row.workmanship" size="mini">
            <el-option label="激光" :value="1" />
            <el-option label="手工" :value="2" />
          </el-select>
        </template>
        <!-- 周长 -->
        <template v-slot:text6Slot="col">
          <el-input-number v-model="col.scope.row.fperimeter" size="mini" />
        </template>
        <!-- 操作 -->
        <template v-slot:btnSlot="col">
          <el-button v-if="col.scope.row.itemcode" type="primary" size="mini" @click="uploadMater(col.scope.row)">更新</el-button>
        </template>
      </jc-table>
    </div>
    <!--    物料弹窗-->
    <material v-if="isMateria" @material="materialData" />
  </div>
</template>

<script>
import {
  autoBomMaterial, queryProjectMaterial,
  saveProjectMaterial, updateProjectMaterial
} from '@/api/production/process'
import { export_json_to_excel, formatJson } from '@/utils/Export2Excel'
import jcButton from '@/components/Button'

export default {
  name: 'ProOrderList',
  components: {
    jcButton,
    material: () => import('@/views/market/marketManage/createMarkerOrder/components/material'),
    numberCode: () => import('@/components/NumberCode')
  },
  data() {
    return {
      aotuTab: false,
      fnumber: '',
      isMateria: false,
      loading: false,
      indexSelf: 0,
      proVal: {
        fname: '',
        fmodel: '',
        fspecification: ''
      },
      // 表头
      tableHeight: '70vh',
      fbillno: '',
      tableData: [], // 销售数据
      tableHeader: [
        { label: this.$t('shop.numIndex'), prop: 'seq', width: 70 },
        { label: this.$t('shop.fnumber1'), type: 'state', prop: 'itemcode', width: '150' },
        { label: this.$t('shop.fname2'), type: 'states', prop: 'itemname', width: '100' },
        { label: this.$t('shop.fdescripTion'), type: 'tag', prop: 'description', width: '130' },
        { label: this.$t('shop.fspecificaTion'), type: 'bill', prop: 'specification', width: '150' },
        { label: this.$t('market.volume'), type: 'order', prop: 'diameter' },
        { label: this.$t('market.thickness'), type: 'operate', prop: 'thickness' },
        { label: this.$t('market.length'), type: 'text1', prop: 'longs' },
        { label: this.$t('market.width'), type: 'text2', prop: 'wide' },
        { label: this.$t('market.height'), type: 'text3', prop: 'high' },
        { label: this.$t('market.perimeter'), type: 'text6', prop: 'fperimeter' },
        { label: this.$t('market.dosage'), type: 'text4', prop: 'qty' },
        { label: this.$t('market.craft'), type: 'text5', prop: 'workmanship1' },
        { label: this.$t('shop.operation'), type: 'btn' },
        { label: this.$t('shop.numIndex'), prop: 'seq1', width: 70 },
        { label: this.$t('shop.fnumber1'), prop: 'itemcode1', width: '130' },
        { label: this.$t('shop.fname2'), prop: 'itemname1', width: '100' },
        { label: this.$t('shop.fdescripTion'), prop: 'description1', width: '130' },
        { label: this.$t('shop.fspecificaTion'), prop: 'specification1', width: '150' },
        { label: this.$t('market.volume'), prop: 'diameter1' },
        { label: this.$t('market.thickness'), prop: 'thickness1' },
        { label: this.$t('market.length'), prop: 'fatherLong' },
        { label: this.$t('market.width'), prop: 'wide1' },
        { label: this.$t('market.height'), prop: 'high1' },
        { label: this.$t('market.fatherQty'), prop: 'fatherqty' },
        { label: this.$t('market.fatherloss'), prop: 'fatherloss' },
        { label: this.$t('market.qty'), prop: 'qty1' },
        { label: this.$t('market.zdosage'), prop: 'sumqty' },
        { label: this.$t('market.funit'), prop: 'company1' }
      ],
      tableHeader1: [],
      proData: []
    }
  },
  created() {
    this.handleGetUntreated()
    this.tableHeader1 = this.tableHeader
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 230px)' : '73vh'
  },
  methods: {
    // 输入物料编码
    getAtuo(index, fnumber) {
      const item = this.tableData[index]
      if (fnumber) {
        item.isDisabled = true
      } else {
        item.isDisabled = false
      }
      this.indexSelf = index
      this.aotuTab = true
      var vm = this
      clearTimeout(vm.timer) // 清除未执行的代码，重置回初始化状态
      vm.timer = setTimeout(() => {
        this.fnumber = fnumber
      }, 600)
    },
    // 导出表格
    handleExport() {
      require.ensure([], () => {
        const tHeader = this.tableHeader.map((res) => {
          return res.label
        })
        const filterVal = this.tableHeader.map((res) => {
          return res.prop
        })
        if (this.tableData.length <= 0) {
          this.$message.warning('没有导出数据')
        } else {
          this.tableData.map(res => {
            if (res.workmanship === 1) {
              res.workmanship1 = '激光'
            } else {
              res.workmanship1 = '手工'
            }
          })
          const list = this.tableData
          const data = formatJson(filterVal, list)
          export_json_to_excel(tHeader, data, '工程BOM自动算料')
        }
      })
    },
    // 详情
    async handleGetUntreated() {
      const DATA = {
        fid: this.$route.params.id
      }
      const RES = await queryProjectMaterial(DATA)
      if (RES.code === 0) {
        this.loading = false
        this.proVal = RES.data
        this.tableData = RES.data.entry
        this.tableData.map(item => {
          if (item.itemcode) {
            item.isDisabled = true
            item.isFnum = false
          } else {
            item.isDisabled = false
            item.isFnum = true
          }
          item.sumqty = (item.qty1 * item.qty).toFixed(4)
        })
      } else {
        this.loading = false
        this.$confirm(RES.message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        })
      }
    },
    // 保存
    save() {
      const DATA = {
        ...this.proVal,
        entry: this.tableData
      }
      saveProjectMaterial(DATA).then(res => {
        if (res.code === 0) {
          this.handleGetUntreated()
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 自动运算
    summen() {
      this.fTreeEntity = []
      this.tableData.forEach((res, index) => {
        this.fTreeEntity.push({
          seq: index + 1,
          workmanship: res.workmanship,
          fentryid: res.fentryid,
          itemcode: res.itemcode,
          itemname: res.itemname,
          description: res.description,
          specification: res.specification,
          diameter: res.diameter,
          longs: res.longs,
          wide: res.wide,
          high: res.high,
          qty: res.qty,
          thickness: res.thickness
        })
      })
      const { fid, fmodel, fspecification, fname, fnumber } = this.proVal
      const DATA = {
        fid, fmodel, fspecification, fname, fnumber,
        fTreeEntity: this.fTreeEntity
      }
      autoBomMaterial(DATA).then(res => {
        if (res.code === 0) {
          this.tableData = res.data
          this.tableData.map(item => {
            if (item.itemcode) {
              item.isDisabled = true
              item.isFnum = false
            } else {
              item.isDisabled = false
              item.isFnum = true
            }
            item.sumqty = (item.qty1 * item.qty).toFixed(4)
          })
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 更新
    uploadMater(ev) {
      updateProjectMaterial({ ...ev }).then(res => {
        if (res.code === 0) {
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 物料名称
    handelName(index) {
      const item = this.tableData[index]
      if (item.itemname) {
        item.isFnum = true
      } else {
        item.isFnum = false
      }
    },
    handleMateriel(index) {
      this.indexSelf = index
      this.isMateria = true
    },
    // 获取物料
    materialData(ev) {
      if (ev.fnumber) {
        const item = this.tableData[this.indexSelf]
        item.itemcode = ev.fnumber
        item.fmaterialid = ev.fmaterialId
        item.itemname = ev.fname
        item.description = ev.fdescripTion
        item.specification = ev.fspecificaTion
        item.diameter = ev.fvolume
        item.thickness = ev.fthickness
        item.longs = ev.flength
        item.wide = ev.fwidth
        item.high = ev.fheight
        item.fperimeter = ev.fperimeter
      }
      this.isMateria = false
      this.aotuTab = false
    },
    // 新增
    newly(ev) {
      if (ev === 1) {
        this.tableData.push({
          seq: this.tableData.length + 1,
          fentryid: 0,
          fmaterialid: 0,
          itemcode: '',
          itemname: '',
          description: '',
          specification: '',
          diameter: '',
          thickness: '',
          longs: '',
          wide: '',
          high: '',
          qty: '',
          isDisabled: false,
          isFnum: false,
          fperimeter: '',
          workmanship: 1
        })
      } else {
        this.tableData.splice(this.indexSelf, 1)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.stockReport {
  //@include listBom;
  background: #FFF;
  padding: 10px;
  .header{
    margin: 0px 0 5px;
    .header-name{
      width: 100%;
    }
    .btn{
      transform: translateY(18%);
      margin-left: 450px !important;
    }
  }
  .el-form {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 5px;
      .el-input {
        width: 180px;
      }
    }
  }
  .tabPosit {
    padding: 5px;
    box-shadow: 0 0 2px #aaa;
    position: absolute;
    top: 3.5vh;
    left: 0;
    background-color: rgba(255, 255, 255, 1);
    z-index: 99999!important;
  }
  .tabPosit1 {
    padding: 5px;
    box-shadow: 0 0 2px #aaa;
    position: absolute;
    top: -25.69vh;
    left: 0;
    background-color: rgba(255, 255, 255, 1);
    z-index: 9999;
  }
}
</style>
